<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${session.title}">教师积分管理</title>
    <link th:href="@{/css/login.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <script th:src="@{/webjs/jquery-1.10.1.min.js}" type="text/javascript"></script>
</head>
<body>
<div class="login-box">
    <h2><p th:text="${session.title}"></p>教师积分管理</h2>
    <form id="login-form" action="/codeLogin" method="post">
        <label for="username"><span style="color: red">*</span>用户名（手机号）:</label>
        <input type="text" id="username" name="username" required>
        <label for="code"><span style="color: red">*</span>验证码:</label>
        <div class="code-input-container">
            <input type="text" id="code" name="code" required>
            <button type="button" id="get-code-btn" onclick="sendVerificationCode()">获取验证码</button>
        </div>
        <!-- 动态设置span的内容和颜色 -->
        <span th:if="${flag==-1}" id="messageError" style="color: red;font-size: 15px">验证码错误</span>
        <span id="message" style="font-size: 15px"></span>
        <br>
        <br>
        <button type="submit">登录</button>
        <a href="/" style="text-decoration: none; color: blue;">
            <button type="button">密码登录</button>
        </a>
        <button type="reset">重置</button>
    </form>
</div>
</body>
<script>
    function sendVerificationCode() {
        var username = document.getElementById("username").value;
        var getCodeBtn = document.getElementById("get-code-btn");

        // 验证手机号是否填写
        if (!username) {
            alert("请输入手机号");
            return;
        }

        // 验证手机号格式
        var phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(username)) {
            alert("手机号格式不正确");
            return;
        }

        // 开始倒计时
        var count = 60;
        getCodeBtn.disabled = true;
        getCodeBtn.textContent = count + "秒后重新获取";

        var countdown = setInterval(function () {
            count--;
            if (count === 0) {
                clearInterval(countdown);
                getCodeBtn.disabled = false;
                getCodeBtn.textContent = "获取验证码";
            } else {
                getCodeBtn.textContent = count + "秒后重新获取";
            }
        }, 1000);

        $.ajax({
            url: '/sendCode',
            type: 'POST',
            data: {username: username},
            success: function (flag) {
                // 获取flag的值
                var messageSpan = document.getElementById("message");
                var messageError = document.getElementById("messageError");

                // 根据flag的值设置span的内容和颜色
                switch (flag) {
                    case "-2":
                        messageSpan.textContent = "不存在此账号";
                        messageSpan.style.color = "red";
                        messageError.style.display = "none";
                        break;
                    case "-3":
                        messageSpan.textContent = "验证码发送失败，请稍后重试";
                        messageSpan.style.color = "red";
                        messageError.style.display = "none";
                        break;
                    case "200":
                        messageSpan.textContent = "验证码发送成功";
                        messageSpan.style.color = "blue";
                        messageError.style.display = "none";
                        break;
                    default:
                        messageSpan.textContent = "";
                        messageSpan.style.color = "black";
                        messageError.style.display = "none";
                        break;
                }
            },
            error: function (error) {
                console.error('Error fetching records:', error);
            }
        });
    }
</script>
</html>